<style lang="scss" scoped>
.dashboard {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  // background: url("../assets/img/logo.png") top no-repeat;
  // 修改最上面lop图片
  background: url("../assets/img/newlogo.png") top no-repeat;
  background-size: contain;
  & > div {
    position: absolute;
    // border: solid 1px rgba(255, 255, 255, 0.2);
  }
}

.title {
  top: 50px;
  left: 30px;
  font-size: 40px;
  color: white;
}
.bg-title {
  position: absolute;
  // top: 48px;
  top: 34px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 464px;
  height: 26px;
  font-size: 35px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #fff;
}

.doughnut {
  top: 107px;
  // left: 26px;
  left: 32px;
  width: 450px;
  height: 198px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}
#main {
  width: 440px;
  height: 160px;
  margin-top: 12px;
}
.point {
  top: 356px;
  // left: 26px;
  left: 32px;
  width: 450px;
  height: 324px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.line {
  // left: 26px;
  left: 32px;
  // bottom: 34px;
  bottom: 8px;
  width: 450px;
  height: 314px;
}
.title-box {
  left: 501px;
  width: 911px;
  margin-top: 130px;
  height: 58px;
  display: flex;
}
.title-center {
  display: flex;
  position: relative;
  // background-color: #fff;
  flex: 1;
  // margin: 3px 3px;
  // justify-content: space-between;
  font-size: 20px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  text-align: center;
  // color: #48eaff;
  color: #fff;
  // text-align: center;
  margin: 0 4px;
}
.title-center .ly-tz {
  flex: 1;
  text-align: center;
  line-height: -58px;
  // background-color: #fff;
}

.panel-hight {
  a {
    color: #48eaff;
  }
  position: relative;
  border: 6px solid transparent;
  border-width: 14px;
  border-image-source: url("../assets/img/title-hight.png");
  border-image-slice: 16;
}

// .map {
//   left: 550px;
//   top: 152px;
//   width: 850px;
//   height: 715px;
// }

.bar {
  left: 506px;
  bottom: 8px;
  width: 911px;
  height: 254px;
  display: flex;
  flex-direction: column;
  .bar-title {
    font-size: 22px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #48eaff;
    margin-top: 20px;
    text-align: left;
  }
  .bar-neirong {
    margin-top: 20px;
    margin-left: 20px;
    width: 866px;
    height: 166px;
    font-size: 16px;
    font-family: Microsoft JhengHei UI;
    font-weight: bold;
    color: #dbefff;
    text-align: left;
  }
  a {
    font-size: 16px;
    color: #dbefff;
    float: right;
  }
}

.pie-char {
  right: 27px;
  top: 107px;
  width: 450px;
  height: 318px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.gauge {
  top: 442px;
  right: 27px;
  width: 450px;
  height: 307px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.double-line {
  right: 27px;
  // bottom: 34px;
  bottom: 8px;
  width: 450px;
  height: 254px;
}
.btnt {
  position: absolute;
  top: -6px;
  right: 0;
  z-index: 11;
  width: 25px;
  height: 25px;
  background: url("../assets/img/btn-t.png") center;
}
// 围栏按钮
.btnwl {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 11;
  width: 25px;
  height: 25px;
  background: url("../assets/img/btn-t.png") center;
}
.dianzi {
  position: absolute;
  top: 357px;
  left: 743px;
  width: 418px;
  height: 269px;
  // background-color: #fff;
}
.weilan {
  position: absolute;
  top: 357px;
  left: 743px;
  width: 418px;
  height: 269px;
  // background-color: #fff;
}
// .fullscreen-button {
//   top: 20px;
//   width: 200px;
//   height: 40px;
//   font-size: 25px;
//   color: white;
//   right: 30px;
//   border-radius: 8px;
//   color: #e9d70c;
// }
</style>
<template>
  <div class="dashboard">
    <div class="bg-title">星云智慧园</div>
    <!-- <div class="title">Dashboard</div> -->
    <!-- <div class='fullscreen-button' @click='toggleFullscreen'>toggle fullscreen</div> -->
    <div class="doughnut panel1">
      <div class="public ">资产使用率</div>
      <!-- <doughnut></doughnut> -->
      <div id="main">
        <!-- <shuiqiu></shuiqiu> -->
        <s-test></s-test>
      </div>
    </div>
    <div class="point panel1">
      <div class="public ">资产监控率</div>
      <!-- <point></point> -->
      <zcjkl></zcjkl>
    </div>
    <div class="line panel1">
      <div class="public ">资产分析统计</div>
      <!-- <line-chart></line-chart> -->
      <zcfxtj></zcfxtj>
      <!-- <test></test> -->
    </div>
    <div class="line-y-ca"></div>
    <div class="title-box">
      <div
        class="panel-title title-center"
        :class="activeClass == index ? 'panel-hight' : ''"
        v-for="(item, index) in itemList"
        :key="index"
        @click="getItem(index)"
      >
        <router-link :to="item.link" class="ly-tz">{{ item.name }}</router-link>
      </div>
    </div>
    <div class="map">
      <!-- <Map></Map> -->
    </div>
    <div class="dianzi" v-show="isDianzi">
      <Weilan ref="child"></Weilan>
    </div>
    <div class="weilan" v-show="isWeilan">
      <Huiyi ref="son"></Huiyi>
    </div>
    <div class="bar panel1">
      <div class="public ">通知公告</div>
      <!-- <bar></bar> -->
      <span class="bar-title">关于启用新版资产管理系统的通知</span>
      <span class="bar-neirong"
        >各位东风南方产业园的员工：为了方便广大员工办理资产相关业务，东风南方产业园新版资产管理系统经试运行调试后拟于2021年1月起正式启用，旧版系统即日起停止使用。
        新资产管理系统运行期间，如有问题或建议，烦请及时沟通东风南方产业园资产管理处，资产管理处将综合运行情况，进一步完善和优化新资产管理系统，并尽快推出新资产管理系统移动端。
      </span>
      <span><a href="javascript:;">具体详情</a></span>
    </div>
    <div class="pie-char panel1">
      <div class="public ">资产围栏统计</div>
      <div class="btnwl" @click="Showl"></div>
      <zcwltj></zcwltj>
    </div>
    <div class="gauge panel1">
      <div class="public ">告警状态统计</div>
      <!-- <gauge></gauge> -->
      <gjzttj></gjzttj>
    </div>
    <div class="double-line panel1">
      <div class="public ">会议室使用统计</div>
      <!-- 按钮 -->
      <div class="btnt" @click="ShowZc"></div>
      <hyssytj></hyssytj>
    </div>
  </div>
</template>

<script>
import Doughnut from "@/components/charts/Doughnut";
import Point from "@/components/charts/Point";
import LineChart from "@/components/charts/Line";
import Map from "@/components/charts/Map";
import Bar from "@/components/charts/Bar";
import Pie from "@/components/charts/Pie";
import Gauge from "@/components/charts/Gauge";
import DoubleLine from "@/components/charts/DoubleLine";
import Shuiqiu from "@/components/charts/Shuiqiu";
import Zcjkl from "@/components/charts/Zcjkl";
import Zcfxtj from "@/components/charts/Zcfxtj";
import Zcwltj from "@/components/charts/Zcwltj";
import Hyssytj from "@/components/charts/Hyssytj";
import Gjzttj from "@/components/charts/Gjzttj";
import Test from "@/components/charts/Test";
import STest from "@/components/charts/STest";
import Weilan from "../components/charts/Weilan";
import Huiyi from "../components/charts/Huiyi";

export default {
  name: "Zcgl",
  components: {
    Doughnut,
    Point,
    Map,
    LineChart,
    Bar,
    Pie,
    Gauge,
    DoubleLine,
    Shuiqiu,
    Zcjkl,
    Zcfxtj,
    Zcwltj,
    Hyssytj,
    Gjzttj,
    Test,
    STest,
    Weilan,
    Huiyi,
  },
  data() {
    return {
      isFullScreen: false,
      activeClass: 2,
      itemList: [
        { name: "园区综合态势", link: "/home" },
        { name: "综合安防", link: "/Zhaf" },
        { name: "资产管理", link: "/Zcgl" },
        { name: "能耗管理", link: "/Nhgl" },
        { name: "环境监测", link: "/Hjjc" },
      ],
      isDianzi: false,
      isWeilan: false,
    };
  },
  methods: {
    getItem(index) {
      this.activeClass = index;
    },
    // toggleFullscreen() {
    //   if (this.isFullScreen) {
    //     this.exitFullScreen()
    //   } else {
    //     this.launchFullScreen(document.documentElement)
    //   }
    //   this.isFullScreen = !this.isFullScreen
    // },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    Showl() {
      console.log("围栏");

      this.isDianzi = !this.isDianzi;
      this.$refs.child.zichan();
    },
    ShowZc() {
      console.log("会议室使用");
      this.isWeilan = !this.isWeilan;
      this.$refs.son.chuachua();
    },
  },
};
</script>
